import { Link } from "react-router-dom";
import useCartStore from "../../stores/cartStore";

const UserHeader = () => {
  const { getTotalItems } = useCartStore();
  const cartItemCount = getTotalItems();
  
  return (
    <header className="bg-white shadow-md">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <Link to="/user" className="text-2xl font-bold text-blue-600">
            家具商城
          </Link>
        </div>
        
        <nav className="hidden md:flex space-x-6">
          <Link to="/user" className="text-gray-600 hover:text-blue-600">
            首页
          </Link>
          <Link to="/user/products" className="text-gray-600 hover:text-blue-600">
            商品
          </Link>
          <Link to="/user/about" className="text-gray-600 hover:text-blue-600">
            关于我们
          </Link>
        </nav>
        
        <div className="flex items-center space-x-4">
          <Link to="/user/cart" className="text-gray-600 hover:text-blue-600 relative">
            购物车
            {cartItemCount > 0 && (
              <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                {cartItemCount}
              </span>
            )}
          </Link>
          <Link to="/user/profile" className="text-gray-600 hover:text-blue-600">
            个人中心
          </Link>
        </div>
      </div>
    </header>
  );
};

export default UserHeader;